<template>
	<!-- 头部公共部份 -->
	<Header></Header>

	<div class="course-filter">
		<div class="filter-main">
			<div class="filter-item">
				<div class="item-title">课程方向:</div>
				<ul>
					<li class="filter-all">全部</li>
					<li v-for="item in firstList" :key="item.id" @click="evtFirst(item.id)" :class="currentId == item.id ? 'filter-all' : ''">{{ item.categoryName }}</li>
				</ul>
			</div>
			<div class="filter-item">
				<div class="item-title">课程分类:</div>
				<ul>
					<li class="filter-all">全部</li>
					<li class="filter-cate" v-for="item in secondList" :key="item.id" @click="evtSecond(item.id)" :class="currentId == item.id ? 'filter-all' : ''">
						{{ item.categoryName }}
					</li>
				</ul>
			</div>
			<div class="filter-item">
				<div class="item-title">课程难度:</div>
				<ul>
					<li class="filter-all">全部</li>
					<li v-for="item in levelList" :key="item.id" @click="evtLevel(item.id)" :class="currentId == item.id ? 'filter-all' : ''">{{ item.name }}</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="course-list">
		<div class="list-main">
			<div class="list-t">
				<ul>
					<li v-for="item in courseFilter" :key="item.id" :class="item.id !== 4 ? 'line' : ''" @click="evtFilter(item.id, item.status)">
						<span :class="currentIdx == item.id ? 'active' : ''">{{ item.name }}</span>
						<div class="Caret" v-if="item.id == 4">
							<el-icon :size="8" :color="item.status == 'price-desc' ? '#2c81ff' : ''"><CaretTop /></el-icon>
							<el-icon :size="8" :color="item.status == 'price-asc' ? '#2c81ff' : ''"><CaretBottom /></el-icon>
						</div>
					</li>
				</ul>
				<div>
					<el-radio-group v-model="radio" @change="tabCourse">
						<el-radio :label="1">免费课程</el-radio>
						<el-radio :label="2">会员免费课程</el-radio>
					</el-radio-group>
				</div>
			</div>
			<ul class="list-c">
				<li v-for="item in courseList" :key="item.id" @click="goDetail(item.id)">
					<img :src="item.courseCover" />
					<router-link :to="{ path: '/detailView/' + item.id }"></router-link>
					<div class="course-content">
						<div class="course-item">{{ item.courseName }}</div>
						<div class="course-item-name">{{ courseTypeFn(item.courseLevel) }}●{{ item.clicks }}人报名</div>
						<div class="price">
							<div class="price-vip">会员专享</div>
							<h4>￥{{ item.discountPrice }}</h4>
						</div>
					</div>
				</li>
			</ul>
			<div class="list-b"><el-pagination background layout="prev, pager, next" :total="courseTotal" @current-change="currentChange" /></div>
		</div>
	</div>

	<!-- 底部公共布局 -->
	<Footer></Footer>
</template>

<script setup>
import { CaretTop, CaretBottom } from '@element-plus/icons-vue';
// 引入组件
import Header from '@/components/common/Header.vue';
import NavSwiper from '@/components/home/NavSwiper.vue';

// 混入mixin:
import courseType from '@/mixins/courseType';
let { courseTypeFn } = courseType();

// 初始化 响应式 一级分类数据:
let firstList = ref([]);
// 初始化 响应式 二级分类数据:
let secondList = ref([]);
// 初始化 响应式 课程数据:
let courseList = ref([]);
// 初始化 响应式 课程总数量:
let courseTotal = ref(0);
// 初始化 响应式 课程难度:
let levelList = ref([{ name: '初阶', id: 1 }, { name: '中阶', id: 2 }, { name: '高阶', id: 3 }]);
// 初始化 响应式 查询课程的参数:
let courseParams = reactive({
	pageNum: 1,
	pageSize: 8,
	entity: {
		firstCategory: '',
		secondCategory: '',
		courseLevel: '',
		sortBy: '',
		isMember: '',
		isFree: ''
	}
});

// api
import { getFirstCategorys, getSecondCategorys, courseSearch } from '@/utils/api/slider';

// 生命周期
onBeforeMount(() => {
	// 获取一级分类数据
	getFirstCategorys().then(res => {
		firstList.value = res.data.list;
		console.log('一级分类数据', res.data.list);
	});
	// 获取二级分类
	secondCategorys({
		categoryId: -1
	});
	// 获取课程
	getCourseSearch(courseParams);
});

// 获取二级分类
const secondCategorys = params => {
	getSecondCategorys(params).then(res => {
		secondList.value = res.data.list;
		console.log('二级分类数据', res.data.list);
	});
};

// 查询课程
const getCourseSearch = params => {
	courseSearch(params).then(res => {
		courseList.value = res.data.pageInfo.list;
		// 课程总数量
		courseTotal.value = res.data.pageInfo.total;
		console.log('查询课程', res.data.pageInfo.list);
	});
};

// 切换点击激活class
let currentId = ref(null);

// 点击一级分类:
const evtFirst = id => {
	currentId.value = id;
	// 获取二级分类
	secondCategorys({
		categoryId: id
	});
	// 获取课程
	courseParams.entity.firstCategory = id;
	courseParams.entity.secondCategory = '';
	courseParams.entity.courseLevel = '';
	courseParams.entity.isMember = '';
	courseParams.entity.isFree = '';

	getCourseSearch(courseParams);
};

// 点击二级分类:
const evtSecond = id => {
	currentId.value = id;
	// 获取课程
	courseParams.entity.secondCategory = id;
	courseParams.entity.courseLevel = '';
	courseParams.entity.isMember = '';
	courseParams.entity.isFree = '';
	getCourseSearch(courseParams);
};

// 点击课程难度:
const evtLevel = id => {
	currentId.value = id;
	// 获取课程
	courseParams.entity.courseLevel = id;
	getCourseSearch(courseParams);
};

// 课程条件筛选的数据
let courseFilter = ref([{ id: 1, name: '综合' }, { id: 2, name: '最新课程' }, { id: 3, name: '最多购买' }, { id: 4, name: '价格', status: '' }]);
// 控制class切换
let currentIdx = ref(1);
// 点击课程筛选:
const evtFilter = (id, status) => {
	//切换class
	currentIdx.value = id;
	if (id == 1) {
		courseParams.entity.sortBy = '';
		courseFilter.value[3].status = '';
	} else if (id == 2) {
		courseParams.entity.sortBy = 'time-desc';
		courseFilter.value[3].status = '';
	} else if (id == 3) {
		courseParams.entity.sortBy = 'clicks-desc';
		courseFilter.value[3].status = '';
	} else if (id == 4) {
		if (status == 'price-desc' || status == '') {
			courseFilter.value[3].status = 'price-asc';
			status = 'price-asc';
		} else {
			courseFilter.value[3].status = 'price-desc';
			status = 'price-desc';
		}
		console.log('状态值:', status);
		courseParams.entity.sortBy = status;
	}
	getCourseSearch(courseParams);
};

// 免费课程/会员免费课程筛选:
const radio = ref('3');
// 点击免费课程/会员免费课程筛选:
let tabCourse = val => {
	console.log('免费课程选项:', val);
	if (val == '1') {
		courseParams.entity.isMember = '';
		courseParams.entity.isFree = '1';
	} else if (val == '2') {
		courseParams.entity.isMember = '1';
		courseParams.entity.isFree = '0';
	}
	getCourseSearch(courseParams);
};

// 分页
const currentChange = val => {
	courseParams.pageNum = val;
	getCourseSearch(courseParams);
};

// 跳转到课程详情页
let router = useRouter();
const goDetail = id => {
	router.push({
		path: '/course/detail',
		query: {
			id
		}
	});
};
</script>

<style scoped>
.course-filter {
	width: 100%;
	height: 197px;
	background: #f3f5f9;
}
.filter-main {
	display: flex;
	flex-direction: column;
	width: 1000px;
	margin: 0 auto;
	height: 197px;
	justify-content: space-around;
}
.filter-item {
	display: flex;
	align-items: center;
}
.item-title {
	margin-left: 20px;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	margin-right: -20px;
}
.filter-item ul {
	/* margin: 20px; */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.filter-item ul li {
	padding: 0 3px;
	margin-right: 30px;
	font-size: 14px;
	font-weight: 400;
	color: #515759;
	/* 小手 */
	cursor: pointer;
}
.filter-item ul li.filter-all {
	/* width: 50px; */
	line-height: 30px;
	text-align: center;
	color: #388fff;
	background: rgba(44, 128, 255, 0.1);
	border-radius: 5px;
	font-size: 14px;
}
.filter-item ul li.filter-cate {
	/* 	overflow: hidden;
	text-overflow: ellipsis; */
	white-space: nowrap;
}
.course-list {
	padding: 50px 0;
	background: #fff;
}
.list-main {
	width: 1000px;
	margin: 0 auto;
}
.list-t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.list-t ul {
	display: flex;
}
.list-t ul li {
	display: flex;
	align-items: center;
	margin-right: 16px;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	color: #515759;
	/* 小手 */
	cursor: pointer;
}
.list-t ul li + li {
	margin-left: 16px;
}
.list-t ul li.line {
	position: relative;
}
.list-t ul li.line :after {
	content: '';
	position: absolute;
	right: -16px;
	top: 0;
	width: 2px;
	height: 100%;
	background: #dbd9d9;
}
.active {
	color: #2c81ff;
}
.Caret {
	display: flex;
	flex-direction: column;
}

.list-c {
	margin-left: -40px;
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* 两种方法都可以 */
	/* display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; */
}
.list-c > li {
	margin-right: 10px;
	width: 240px;
	height: 275px;
	background: #ffffff;
	box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
	border-radius: 2px;
}
.list-c li:last-child:nth-child(4n + 2) {
	margin-right: calc((100% - 240px) / 3 * 2);
}
.list-c li:last-child:nth-child(4n + 3) {
	margin-right: calc((100% - 240px) / 3 * 1);
}
.list-c > li > img {
	width: 240px;
	height: 153px;
}
.course-content {
	height: 105px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2px 12px;
}
.course-content .course-item {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}
.course-content .course-item-name {
	font-size: 12px;
	color: #808080;
}
.price {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	color: #fe7062;
}
.price-vip {
	width: 64px;
	height: 16px;
	font-size: 12px;
	text-align: center;
	color: #ffffff;
	background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
	border-radius: 16px 0 16px 0;
}
.price > h4 {
	margin-left: 16px;
	font-size: 16px;
	color: #fe7062;
}
.list-b {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 50px;
}
</style>
